<template>
	<!-- <view class="uni-padding-wrap uni-common-mt">
		<uni-segmented-control
			:current="list.current"
			:values="list.items"
			style-type="button"
			active-color="#007aff"
			@clickItem="onClickItem"
		/>
	</view> -->
	<view class="page">
		<view class="sel">
			<view
				v-for="v in list.items"
				:key="v.id"
				:class="['item', v.id == list.current ? 'active' : '']"
				@click="changeCurrent(v.id)"
			>
				<text>{{ v.name }}</text>
			</view>
		</view>
		<componentsDoc :partId="list.current"></componentsDoc>
	</view>
</template>

<script setup>
import componentsDoc from './componentsDoc.vue'
import { reactive, onBeforeMount } from 'vue'
import { getBig,getPart,getDepartments } from '@/api/AppointmentRegisterAPI.js'
const list = reactive({
	items: [],
	current: 0
})
const changeCurrent = id => {
	list.current = id
}
const part = async () => {
	let { data } = await getPart()
	if (data.code == 0) {
		list.items = data.data
		list.current = list.items[0].id
	}
}
onBeforeMount(() => {
	part()
})
</script>

<style lang="less" scoped>
.page {
	padding: 30rpx;
	.sel {
		display: flex;
		justify-content: center;
		.item {
			width: 210rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			border: 1px solid #007aff;
			margin-left: -1px;
			box-sizing: border-box;
			color: #007aff;
			&:first-child {
				border-radius: 4px 0 0 4px;
			}
			&:last-child {
				border-radius: 0 4px 4px 0;
			}
		}
		.active {
			color: #fff;
			background: #007aff;
		}
	}
}
</style>
